<template>
    <div>
      <div class="tops">
        <div class="top">
          <router-link to="/personal">
            <i class="el-icon-arrow-left top-content"></i>
          </router-link>
          <div class="top-content">
            我的订单
          </div>
        </div>
        <div class="menu">
          <div class="menu-main">
            <div class="menu-text iconfont" @click="clickChoose(1)" :class="{active: this.mark===true}">
                &#xe60b; 全部订单
            </div>
            <div class="menu-text iconfont" @click="clickChoose(0)" :class="{active: this.mark===false}">
                &#xe62f; 待收货
            </div>
          </div>
        </div>
      </div>
      <!-- 暂无订单 -->
      <div class="noOrder" v-show="this.orders.fieldName === 'brand'">暂无订单</div>
      <!-- 待收货订单 -->
      <div>
        <div class="show" v-for="(item) of dOrders" :key="item.id">
          <div class="show-top" @click="skip(item.brand)">
            <img class="top-left" :src="item.brand.image" alt="">
            <div class="top-right">{{item.brand.name}}</div>
            <div class="top-right">{{item.brand.price}}积分</div>
          </div>
          <div class="show-bottom">
            <!-- <el-button class="show-button">查看物流</el-button> -->
            <el-button class="show-button" @click="affirmSubmit(item.id)">确认收货</el-button>
          </div>
        </div>
      </div>
      <!-- 全部订单 -->
      <div v-show="mark">
        <div class="show" v-for="(item) of yOrders" :key="item.id">
          <div class="show-top" @click="skip(item.brand)">
            <img class="top-left" :src="item.brand.image" alt="">
            <div class="top-right">{{item.brand.name}}</div>
            <div class="top-right">{{item.brand.price}}积分</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
import { getLocalStorage } from '../../../utils/localStorage'

export default {
  data () {
    return {
      orders: [],
      dOrders: [],
      yOrders: [],
      mark: true,
      id: ''
    }
  },
  methods: {
    // 切换全部订单和待收货
    clickChoose (e) {
      if (e === 1) {
        this.mark = true
      } else {
        this.mark = false
      }
    },
    // 确认收货按钮
    affirmSubmit (e) {
      let data = Qs.stringify({id: e})
      axios.put('/user/confirm?' + data).then(res => {
        console.log(res, 'dd')
        if (res.data.code === 1) {
          this.$message({
            message: '提交订单成功',
            type: 'success'
          })
          // 重新获取订单的数量
          let uData = 'id=' + getLocalStorage('id')
          axios.get('/user/order?' + uData)
            .then(res => {
              this.orders = res.data.data
              console.log(this.orders, 'dadadadad')
              this.dOrders = []
              for (let i = 0; i < this.orders.length; i++) {
                console.log(this.orders[i].status === 0, 'this.orders[i].status === 0')
                if (this.orders[i].status === 0) {
                  this.dOrders.push(this.orders[i])
                }
              }
              this.yOrders = []
              for (let i = 0; i < this.orders.length; i++) {
                if (this.orders[i].status === 1) {
                  this.yOrders.push(this.orders[i])
                }
              }
            })
        }
      })
    },
    skip (e) {
      console.log(e, 'eeeee', e.brandId)
      this.$router.push({name: 'MallExchange', params: e})
    }
  },
  mounted () {
    // 获取全部订单
    let data = 'id=' + getLocalStorage('id')
    console.log(data, 'aaadata')
    axios.get('/user/order?' + data)
      .then(res => {
        this.orders = res.data.data
        console.log(this.orders, 'this.orders')
        this.dOrders = []
        for (let i = 0; i < this.orders.length; i++) {
          console.log(this.orders[i].status === 0)
          if (this.orders[i].status === 0) {
            this.dOrders.push(this.orders[i])
          }
        }
        this.yOrders = []
        for (let i = 0; i < this.orders.length; i++) {
          if (this.orders[i].status === 1) {
            this.yOrders.push(this.orders[i])
          }
        }
        console.log(this.dOrders, this.yOrders, 'this.dOrders')
      })
    this.mark = this.$route.params.mark
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/global";
.tops {
  height: 75px;
   .top{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 45px;
    line-height: 45px;
    background: skyblue;
    .top-content{
      float: left;
      margin-left: 5px;
    }
    .el-icon-arrow-left{
      font-size: 25px;
    }
  }
  .menu {
    width: 100%;
    position: fixed;
    top: 45px;
    .menu-main {
      height: 30px;
      line-height: 30px;
      background: #fff;
      position: relative;
      .menu-text {
        float: left;
        width: 50%;
        text-align: center;
        font-size: 12px;
      }
    }
  }
}
  .noOrder {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 23px;
    color: #a69f9f;
    margin-top: 50px;
  }
  .active{
    background: skyblue;
  }
  .show{
    width: 96%;
    // height: 100px;
    margin: 10px auto 0;
    padding-bottom: 10px;
    background: white;
    overflow: hidden;
    border-radius: 4px;
    .show-top{
      height: 60px;
      width: 92%;
      margin: 0 auto;
      padding-top: 10px;
      font-size: 14px;
      .top-left{
        float: left;
        height: 60px;
        margin-right: 10px;
        border-radius: 10px;
      }
      .top-right{
        padding-top: 10px;
      }
    }
    .show-bottom{
      .show-button{
        float: right;
        margin-right: 15px;
      }
    }
    el-button {
      padding: 6px 7px;
      font-size: 1px;
      border-radius: 10px;
    }
  }
</style>
